<template>
  <div id="parent">
    <common-head :child-name="childName" father-name="系统管理"></common-head>
    <div class="body">
        <div class="userInfo">
          <user-head part-name="用户资料"></user-head>
          <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-top: 30px">
            <el-form-item label="用户ID">
              {{form.name}}
            </el-form-item>
            <el-form-item label="头像">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">上传头像</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户昵称">
              <el-input v-model="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="form.weight"></el-input>
            </el-form-item>
            <el-form-item label="行业">
              <el-select v-model="form.region" placeholder="请选择行业">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.resource">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="地区">
              <el-cascader
                :options="options"
                :props="props"
                clearable></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>
  </div>
</template>

<script>
import commonHead from "../common/commonHead";
import userHead from "./userHead";
export default {
  name: "editUser",
  components: {commonHead,userHead},
  data(){
    return {
      childName: '编辑资料',
      form: {
          name: '',
          headImg: '',
          nickName: '',
          region: '',
          birthday: '',
          phone: '',
          weight: ''
      },
      props: { multiple: true },
      options: [{
        value: 1,
        label: '东南',
        children: [{
          value: 2,
          label: '上海',
          children: [
            { value: 3, label: '普陀' },
            { value: 4, label: '黄埔' },
            { value: 5, label: '徐汇' }
          ]
        }, {
          value: 7,
          label: '江苏',
          children: [
            { value: 8, label: '南京' },
            { value: 9, label: '苏州' },
            { value: 10, label: '无锡' }
          ]
        }, {
          value: 12,
          label: '浙江',
          children: [
            { value: 13, label: '杭州' },
            { value: 14, label: '宁波' },
            { value: 15, label: '嘉兴' }
          ]
        }]
      }, {
        value: 17,
        label: '西北',
        children: [{
          value: 18,
          label: '陕西',
          children: [
            { value: 19, label: '西安' },
            { value: 20, label: '延安' }
          ]
        }, {
          value: 21,
          label: '新疆维吾尔族自治区',
          children: [
            { value: 22, label: '乌鲁木齐' },
            { value: 23, label: '克拉玛依' }
          ]
        }]
      }]
    }
  }
}
</script>

<style scoped>
#parent{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.body{
  background-color: #F0F2F5;
  padding-top: 15px;
  box-sizing: border-box;
}
.userInfo{
  width: 80%;
  margin: auto;
  background-color: white;
  margin-top: 10px;
  /*height: 80px;*/
  padding-bottom: 15px;
  padding-top: 5px;
  box-sizing: border-box;
}
</style>
